<!--
 * @Author: Mcc
 * @Date: 2024-08-08 14:48:38
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-21 00:14:39
 * @FilePath: \ft--pc-apply\src\views\progress\UnderWay.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
    <div id="under-way">
        <div class="banner">
            <div class="date">
                <div class="label">投递日期:</div>
                <div class="time">{{ $route.query.resumesTime }}</div>
            </div>
            <img :src="img" alt="">
        </div>
        <div class="protocol" @click="checkContract"
            v-if="route.query?.resumesStatusName == '已确认签约' && resumeProcess.resumesStatusName == 0">
            查看应约协议
        </div>
        <Steps :current="$route.query.process"
            v-if="resumeProcess.educationType == 0 && resumeProcess.resumesStatusName == 0">
        </Steps>
        <commonModal ref="myModal">
            <template #default>
                <div class="modal-wrap">
                    <div class="modal-wrap-bg">
                        <div class="modal-wrap-inner">
                            <div class="modal-wrap-item1">亲爱的{{ resumeInfo.userName }}同学：</div>
                            <div class="modal-wrap-item2">你好！</div>
                            <div class="modal-wrap-item3">
                                我们很开心通知您通过了方田教育的培训考核，正式进入三方签约环节，为了明确您的签约意向，我们向您发送此确认书。请认真阅读后确认是否签署。</div>
                            <div class="modal-wrap-item4">——方田教育{{ resumeInfo.currentDay }}</div>
                        </div>
                    </div>
                    <div class="modal-bottom">
                        <div class="content">如果您在<span
                                style="color: #FF4242;">三个工作日</span>之内未给出明确答复，则视为放弃此份offer，公司将不再为您保留此岗位。</div>
                        <a-button type="primary" @click="checkAgreement" v-if="educationType == '0'"
                            class="modal-btn">查看应约协议</a-button>
                        <a-button type="primary" @click="confirm" v-else class="modal-btn">确
                            定</a-button>
                    </div>
                </div>
            </template>
        </commonModal>
    </div>
</template>

<script setup lang='ts'>
import { getImageUrl } from '@/assets/common';
import Steps from '@/components/Steps.vue';
//import router from '@/routers';
import commonModal from '../index/commonModal.vue';

import { useStore } from '@/store';
const router = useRouter();
const store = useStore();

const { resumeInfo, resumeProcess } = store as any;
console.log(resumeProcess)
const props = defineProps(['isConfirm']);
const img = ref<any>(null);
const map = {
    '已确认签约': "success.png",
    '未通过': "not-pass.png",
    '自愿放弃': "give-up.png",
    "进行中": "under-way.png"
}
const route = useRoute() as any;
const myModal = ref<typeof commonModal>(commonModal);
console.log(map[route.query?.resumesStatusName])
img.value = getImageUrl(map[route.query?.resumesStatusName], 'progress')

const educationType = ref();
onMounted(() => {
    educationType.value = route.query.educationType
    if (route.query.process == '6-0') {
        if (resumeProcess.educationType == 0) {
            //应届生
            if (resumeProcess.resumesStatusName == 0) {
                myModal.value.show = true
            }
        } else {
            //往届生一直弹框
            myModal.value.show = true
        }
    }
})
const checkContract = () => {
    router.push({
        path: '/ContractAgreementPrivew',
    })
}
const checkAgreement = () => {
    router.push('/contract')
}
const confirm = () => {
    myModal.value.show = false
}
</script>

<style lang="scss" scoped>
#under-way {
    position: relative;

    .protocol {
        position: absolute;
        /* top: 0; */
        right: 80px;
        bottom: 5px;
        cursor: pointer;
    }
}

.banner {
    width: 883px;
    height: 72px;
    background: linear-gradient(92deg, #EDF1F7 0%, #F7F9FB 100%);
    border-radius: 10px 10px 10px 10px;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;

    img {
        position: absolute;
        right: -10px;
    }
}

.date {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 20px;
    color: #435679;

    .label {
        margin-right: 10px;
    }
}

.modal-wrap {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 460px;

    .modal-wrap-bg {
        background: rgba(0, 0, 0, 0.5);
        background: url("../../assets/img/login/login-bg.png");
        background-size: 100% 100%;
        width: 100%;
        height: 282px;
        padding: 24px 20px;
        box-sizing: border-box;
        color: #fff;

        .modal-wrap-inner {
            position: relative;
            z-index: 9;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 282px;
            background: rgba(0, 0, 0, 0.5);
            /* 半透明黑色背景 */
            z-index: 1;
            /* 确保伪元素位于内容后面 */
        }

        .modal-wrap-item2 {
            margin-top: 20px;
            margin-bottom: 10px
        }

        .modal-wrap-item4 {
            margin-top: 42px;
            text-align: right;
        }
    }

    .modal-bottom {
        position: relative;
        width: 460px;

        .content {
            width: 460px;
            line-height: 28px;
            margin: 20px 0;
        }

        .modal-btn {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
</style>